<template>
  <div
    class="page"
    id="screenshot"
  >
    <div
      ref="printMe"
      class="screenBox"
      v-show="!output"
    >
      <p>Come with you are</p>
      <img
        src="../assets/img/gakki2.jpg"
        alt=""
      >
    </div>
    <img
      class="screenShow"
      :src="output"
      v-show="output"
    >
    <van-button
      class="default screenBtn"
      type="primary"
      @click="print"
      v-show="!output"
    >点击生成图片</van-button>
    <van-button
      class="default"
      @click="backHome"
      type="primary"
    >返回首页</van-button>
  </div>
</template>

<script>
export default {
  name: 'screenshot',
  data () {
    return {
      output: null
    }
  },
  methods: {
    async print () {
      const el = this.$refs.printMe;
      // add option type to get the image version
      // if not provided the promise will return 
      // the canvas.
      const options = {
        type: 'dataURL'
      }
      this.output = await this.$html2canvas(el, options);
    },
    backHome () {
      this.$router.replace({ name: 'home' });
    }
  }
}
</script>

<style lang="less" scoped>
.screenBox,
.screenShow {
  position: relative;
  margin: 0 auto;
  width: 300px;
  height: 375px;
  img {
    width: 100%;
    height: 100%;
  }
  p {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: #ffffff;
    text-align: center;
    font-size: 0.36rem;
    font-variant: small-caps;
  }
}
.default {
  position: absolute;
  bottom: 25%;
  right: 15%;
}
.screenBtn {
  left: 15%;
  width: 116px;
}
</style>

